<!-- JSON动态渲染器 -->
<template>
  <view class="json-renderer">
    <!-- 页面配置 -->
    <view class="page-container" :style="pageStyle">
      <!-- 动态渲染组件 -->
      <component
        v-for="(component, index) in components"
        :key="index"
        :is="getComponentName(component.id)"
        v-bind="component.property"
        :style="component.property.style"
        @search="onSearch"
        @menuClick="onMenuClick"
        @adClick="onAdClick"
        @itemClick="onItemClick"
        @moreClick="onMoreClick"
        @itemClick="onCarouselItemClick"
        @change="onCarouselChange"
      />
    </view>
  </view>
</template>

<script setup>
  import { computed, ref } from 'vue';
  import sheep from '@/sheep';

  // 引入所有需要的组件
  import SHomeNavbar from '@/sheep/components/s-home-navbar/s-home-navbar.vue';
  import SHomeMenu from '@/sheep/components/s-home-menu/s-home-menu.vue';
  import SHomeAdCube from '@/sheep/components/s-home-ad-cube/s-home-ad-cube.vue';
  import SHomeFeatured from '@/sheep/components/s-home-featured/s-home-featured.vue';
  import SCarousel from '@/sheep/components/s-carousel/s-carousel.vue';

  const props = defineProps({
    // JSON配置数据
    config: {
      type: Object,
      default: () => ({})
    },
    // 是否显示调试信息
    debug: {
      type: Boolean,
      default: false
    }
  });

  const emits = defineEmits(['componentEvent']);

  // 组件映射表
  const componentMap = {
    'SearchNavbar': SHomeNavbar,
    'Carousel': SCarousel,
    'MenuSwiper': SHomeMenu,
    'AdCube': SHomeAdCube,
    'FeaturedContent': SHomeFeatured
  };

  // 解析页面样式
  const pageStyle = computed(() => {
    if (!props.config.page) return {};
    
    const { backgroundColor, backgroundImage } = props.config.page;
    return {
      backgroundColor: backgroundColor || '#f5f6fa',
      backgroundImage: backgroundImage ? `url(${backgroundImage})` : 'none',
      minHeight: '100vh'
    };
  });

  // 解析组件列表
  const components = computed(() => {
    if (!props.config.components || !Array.isArray(props.config.components)) {
      return [];
    }
    
    return props.config.components.map(component => {
      // 根据组件类型映射属性
      const mappedProperty = mapComponentProperties(component.id, component.property);
      
      return {
        id: component.id,
        property: {
          ...mappedProperty,
          // 确保样式对象存在
          style: mappedProperty.style || {}
        }
      };
    });
  });

  // 组件属性映射函数
  const mapComponentProperties = (componentId, property) => {
    switch (componentId) {
      case 'SearchNavbar':
        return {
          searchPlaceholder: property.searchPlaceholder,
          style: property.style
        };
      
      case 'Carousel':
        return {
          type: property.type,
          indicator: property.indicator,
          autoplay: property.autoplay,
          interval: property.interval < 10 ? property.interval * 1000 : property.interval, // 如果小于10则认为是秒，转换为毫秒
          duration: property.duration,
          circular: property.circular,
          items: property.items,
          style: property.style
        };
      
      case 'MenuSwiper':
        return {
          menuData: {
            column: property.column,
            list: property.list
          },
          bgColor: property.style?.bgColor,
          padding: property.style?.padding,
          borderRadius: property.style?.borderRadius,
          style: property.style
        };
      
      case 'AdCube':
        return {
          leftAds: property.leftAds,
          rightAds: property.rightAds,
          bannerConfig: property.bannerConfig,
          bgColor: property.style?.bgColor,
          padding: property.style?.padding,
          borderRadius: property.style?.borderRadius,
          gap: property.style?.gap,
          style: property.style
        };
      
      case 'FeaturedContent':
        return {
          sectionTitle: property.sectionTitle,
          sectionSubtitle: property.sectionSubtitle,
          layoutType: property.layoutType,
          featuredItems: property.featuredItems,
          moreUrl: property.moreUrl,
          bgColor: property.style?.bgColor,
          padding: property.style?.padding,
          borderRadius: property.style?.borderRadius,
          style: property.style
        };
      
      default:
        return property;
    }
  };

  // 获取组件名称
  const getComponentName = (componentId) => {
    return componentMap[componentId] || 'view';
  };

  // 事件处理函数
  const onSearch = (data) => {
    console.log('搜索事件:', data);
    emits('componentEvent', { type: 'search', data });
  };

  const onMenuClick = (data) => {
    console.log('菜单点击事件:', data);
    emits('componentEvent', { type: 'menuClick', data });
  };

  const onAdClick = (data) => {
    console.log('广告点击事件:', data);
    emits('componentEvent', { type: 'adClick', data });
  };

  const onItemClick = (data) => {
    console.log('项目点击事件:', data);
    emits('componentEvent', { type: 'itemClick', data });
  };

  const onMoreClick = (data) => {
    console.log('更多点击事件:', data);
    emits('componentEvent', { type: 'moreClick', data });
  };

  const onCarouselItemClick = (data) => {
    console.log('轮播图点击事件:', data);
    emits('componentEvent', { type: 'carouselItemClick', data });
  };

  const onCarouselChange = (data) => {
    console.log('轮播图切换事件:', data);
    emits('componentEvent', { type: 'carouselChange', data });
  };

  // 调试信息
  if (props.debug) {
    console.log('JSON渲染器配置:', props.config);
    console.log('解析后的组件:', components.value);
  }
</script>

<style lang="scss" scoped>
.json-renderer {
  width: 100%;
  min-height: 100vh;

  .page-container {
    width: 100%;
    min-height: 100vh;
  }
}
</style>
